<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progressShow</title>
</head>
<style type="text/css">
    @property --progress {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 0%;
    }

    .g-progress {
        margin: auto;
        width: 240px;
        height: 25px;
        border-radius: 25px;
        background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
        border: 1px solid #eee;
        transition: .3s --progress;
    }


</style>

<script src="/js/jquery.min.js"></script>
<body>
<div class="g-container">
    <label id="progressId" style="left: 50%;margin-left: 350px;">progressId</label>
    <br>
    <label id="status" style="left: 50%;margin-left: 350px;">未开始</label>
    <br>
    <label id="processed" style="left: 50%;margin-left: 350px;">0</label>/<label id="total">999</label>
    <br>
    <label style="left: 50%;margin-left: 350px;">预计剩余</label>:<label id="estimatedRemaining">999</label>
    <div class="g-progress" id="progress" onclick="change()" style="--progress: 0%">
    </div>
</div>
</body>

<script>
    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function ajax(url, fnSucc) {
        if (window.XMLHttpRequest) {
            var oAjax = new XMLHttpRequest();
        } else {
            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
        }
        oAjax.open("GET", url, true);//把要读取的参数的传过来。
        oAjax.send();
        oAjax.onreadystatechange = function () {
            if (oAjax.readyState == 4) {
                if (oAjax.status == 200) {
                    fnSucc(oAjax.responseText);//成功的时候调用这个方法
                } else {
                    if (fnfiled) {
                        fnField(oAjax.status);
                    }
                }
            }
        };
    }

    function change() {
        alert('str');
        ajax('/progress/api/query/validateAllProxy_STABLE_IP_PROXY_REPO', function (str) {
            alert(str);
        })
    }

    var timerId;
    $(function () {
        //每隔0.5秒自动调用方法，实现进度条的实时更新
        timerId = window.setInterval(getForm, 1000);
    });

    function getForm() {
        //使用JQuery从后台获取JSON格式的数据
        var progressId = getUrlParam('progressId');
        $.ajax({
            type: "post",//请求方式
            url: "/progress/api/query/" + progressId,//发送请求地址
            timeout: 5000,//超时时间：5秒
            dataType: "json",//设置返回数据的格式
            //请求成功后的回调函数 data为json格式
            success: function (data) {
                if (data.percent >= 100) {
                    window.clearInterval(timerId);
                }
                $('#progress').css('--progress', data.percent);
                $('#processed').text(data.processed);
                $('#total').text(data.total);
                $('#estimatedRemaining').text(data.estimatedRemaining);
                $('#status').text(data.status);
                $('#progressId').text(data.id);
            },
            //请求出错的处理
            error: function () {
                window.clearInterval(timerId);
                alert("请求出错");
            }
        });
    }


    // 判断设备
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"
        ];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }


</script>
</html>